<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        float: left;
        width: 100%;
        height: auto !important;
        word-break:break-all;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
    .department >>> .layui-table td, .layui-table th {
        padding: 9px 2px;
        /*white-space: nowrap;*/
    }
    select{
        color: #eee
    }
    option{
        color: #000;
    }
    .layui-inline {
        padding: 5px 0;
    }
    .layui-colla-content {
        border-top: none;
    }
    .layui-colla-title {
        background: none;
        padding-left: 15px !important;
        height: auto;
    }
    .department >>> .layui-colla-icon {
        left: auto;
        right: 15px !important;
    }
    .layui-collapse {
        border: 0 !important;
    }
    /*.department {*/
    /*    position: relative;*/
    /*}*/
    .openicon {
        position: absolute;
        right: 15px;
        top: 10px;
        z-index: 100000;
        border-radius: 50%;
        color: #fff;
        width: 24px;
        text-align: center;
        height: 24px;
        line-height: 24px;
        background: rgba(0,150,136, 0.7);
    }
    .nodata {
        background: #f2f2f2;
        color: #333;
        text-align: center;
        padding: 5px 0;
    }
    .layui-table td p, .layui-table td .rj-cell {
        padding: 3px 0;
    }
    .layui-table td {
        text-align: left !important;
    }

    .rj-wrap {
        font-size: 0;
        width: 100%;
        padding: 0 10px;
        display: flex;
    }
    .cont-left {
        width: 73%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
    }
    .cont-right {
        width: 29%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
      background: #fafafa;
    }
    .cont-tit {
        font-size: 12px;
        padding: 5px 10px;
        color: #bbb;
    }
    .cont-box {
        background: #fff;
        margin: 10px 0;
    }
    .rj-cell {
        display: inline-block;
        padding: 5px 10px;
    }
    .attachimg {
        width: 80px;
        padding: 5px 10px;
        height: 80px;
    }
    .attachimg:hover {
        cursor: pointer;
    }

    .layui-elem-field legend.btns {
        position: absolute;
        right: 20px;
        top: -2px;
    }
</style>

<template>
      <div class="app-container">
<!--        <el-page-header @back="$router.push({path: '/harvest/procurementcontract'})" content="采收合同详情">-->
<!--        </el-page-header>-->
        <div class="rj-wrap">
          <div class="cont-left" id="viewSell">
            <div class="cont-box" style="margin-top: 5px;">
              <p class="cont-tit">基础信息</p>
              <div>
                <div class="rj-cell"><label>合同编号：</label><span>{{contract.code}}</span></div>
                <div class="rj-cell"><label>名称：</label><span>{{contract.name}}</span></div>
                <div class="rj-cell"><label>采收类型：</label><span>{{contract.type == 1 ? '地头采收' : '库房采收'}}</span></div>
                <div class="rj-cell" v-if="contract.harvestType == 2"><label>采收数量：</label><span>{{contract.weight}} 吨</span></div>
                <div class="rj-cell"><label>状态：</label><span>{{contract.statusname}}</span></div>
              </div>
              <div>
                <div class="rj-cell"><label>采收主体：</label><span>{{contract.parta}}</span></div>
                <div class="rj-cell"><label>部门：</label><span>{{contract.departname}}</span></div>
                <div class="rj-cell"><label>入库库房：</label><span>{{contract.srname}}</span></div>
              </div>
              <div>
                <div class="rj-cell"><label>供应商：</label><span>{{contract.supplierName}}</span></div>
                <div class="rj-cell"><label>付款方式：</label><span>{{contract.paymentmethod == 1 ? '装车付' : '验收付'}}</span></div>
              </div>
              <div>
                <div class="rj-cell"><label>开户银行：</label><span>{{contract.bank}}</span></div>
                <div class="rj-cell"><label>账号：</label><span>{{contract.bankcode}}</span></div>
            </div>
            <div>
                <div class="rj-cell"><label>质检标准：</label><span>{{contract.qaname}}</span></div>
                <div class="rj-cell"><label>扣杂方式：</label><span>{{contract.deducttypeName}}</span></div>
                <div class="rj-cell"><label>扣杂标准：</label><span>{{contract.isdiscountName}}</span></div>
                <div class="rj-cell"><label>扣杂率：</label><span>{{contract.discountrate}}%</span></div>
              </div>
              <p class="cont-tit">产品信息</p>
              <div>
                <div class="rj-cell" v-if="contract.regionname != ''"><label>所属区域：</label><span>{{contract.regionname}}</span></div>
                <div class="rj-cell"><label>产品：</label><span>{{contract.productname}}</span></div>
                <div class="rj-cell"><label>规格：</label><span>{{contract.specificationname}}</span></div>
                <div class="rj-cell" v-if="contract.seriesname != ''"><label>系列：</label><span>{{contract.seriesname}}</span></div>
                <div class="rj-cell"><label>单价：</label><span>{{contract.price}} 元/吨</span></div>
              </div>
            </div>

          </div>
          <div class="cont-right">
            <FlowNode v-if="isReady" ref="nodesElem" :flowid="flowid" :orderid="guid" ></FlowNode>
          </div>
        </div>
      </div>

</template>

<script>
  import FlowNode from '@/components/FlowNode/index'
  import {getProcurementcontract} from "@/api/harvest/procurementcontract";
    let qs = require('qs');
    export default {
        name: 'contractinfo',
        data () {
            return {
              flowid: 39,
              guid : '',
              contract: '',
              isReady: false
            }
        },
        components: {
          FlowNode,
        },
      created() {
            let that = this;
            this.guid = this.$route.query.id;
            this.getOrder(this.guid);
        },
        methods: {
          handleClickOutside() {
            this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
          },
            packUnit: function(unit, currency) {
                return unit != undefined && unit != '' ? currency == 2 ? '美元/' : '元/' + unit : '';
            },
            getOrder: function (id) {
                let that = this;
              getProcurementcontract(id).then(response => {
                    if (response.code == 200) {
                      this.contract = response.data;
                      //具备展示节点列表条件
                      this.isReady = true;
                    } else {
                        this.msgError('系统错误');
                    }
                });
            }
        }
    }
</script>
